import { DirectiveBinding } from "vue"

const io = new IntersectionObserver((obversers) => {
    obversers.forEach((observer) => {
        if (observer.isIntersecting) {
            const imgElement = observer.target as HTMLImageElement;
            imgElement.src = imgElement.dataset.src || ''
            delete imgElement.dataset.src
            imgElement.classList.add('lazyload')
            imgElement.classList.remove('lazyloading')
            imgElement.classList.remove('lazyloaded')
            io.unobserve(imgElement)
        }
    })
})
export default (el: HTMLImageElement, build: DirectiveBinding) => {
    if (build.value) {
        io.observe(el)
    }
}